var images = ["./img/0.jpg", "./img/5.jpg", "./img/9.jpg"];
//   1. 每列的宽度一样   列数=大盒子的宽度/（区块宽度+间距）
//   2. 先排第一行
//   3. 再排剩余的区块
//   4. 加载新的数据块，按照前面的方式进行填充
window.onload = function () {
  var oWrap = document.querySelector("#wrap");
  //var aItems = oWrap.querySelectorAll("div"); //所有的区块 动态的新增和减少元素，对长度没有任何影响，你最初是多少就是多少
  var aItems = oWrap.getElementsByTagName("div"); //动态的新增和减少元素，会通过长度体现出来
  // console.log(aItems.length);
  var mg = 20; //设置区块间距
  var colsWidth = aItems[0].offsetWidth + mg; //一列宽度
  var cols = parseInt(oWrap.offsetWidth / colsWidth); //列数
  var arrHei = []; //用来保存每列的高度的

  //先排第一行 第一行的区块top值是相同的，姑且设为0，第一行的区块left有规律
  for (var i = 0; i < cols; i++) {
    aItems[i].style.top = 0;
    aItems[i].style.left = i * colsWidth + "px";
    arrHei.push(aItems[i].offsetHeight);
  }
  //排剩余的区块 确定那一列高度最小，有个前提是把所有列的高度都取出来，存数组里

  //求数组的最小值及索引
  //console.log(arrHei);
  function getMin(arr) {
    var minIndex = 0; //假设第一个值最小
    for (var i = 1; i < arr.length; i++) {
      //让minIndex对应的值和后面所有的值进行比较
      if (arr[minIndex] > arr[i]) {
        minIndex = i;
      }
    }
    //循环结束后minIndex是最小值的索引
    return [minIndex, arr[minIndex]]; //第一个值最小值索引，第二个值是最小值
  }
  //console.log(getMin(arrHei));

  //封装一个函数，排其他区块
  function confirmOtherPosition(num) {
    for (var i = num; i < aItems.length; i++) {
      var min = getMin(arrHei);
      aItems[i].style.left = aItems[min[0]].style.left;
      console.log(aItems[min[0]].style.left); //left和最小高度那一列left相同
      aItems[i].style.top = min[1] + mg + "px";
      //更新高度
      arrHei[min[0]] += aItems[i].offsetHeight + mg;
    }
  }
  confirmOtherPosition(cols);
  //加载新的数据
  window.onscroll = function () {
    var st = document.documentElement.scrollTop; //滚动条滚动的距离
    var ch = document.documentElement.clientHeight; //可视区域的高度
    if (st >= getMin(arrHei)[1] - ch) {
      images.forEach(function (src) {
        var oDiv = document.createElement("div");
        oDiv.innerHTML = "<img src='" + src + "'>";
        oWrap.appendChild(oDiv);
      });
      //排位置
      var aItems = oWrap.querySelectorAll("div");
      console.log(aItems.length);
      confirmOtherPosition(aItems.length - images.length);
    }
  };
};
